<%--
  Created by IntelliJ IDEA.
  User: vv
  Date: 2021/12/1
  Time: 11:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>后台登录</title>
    <script src="/js/jquery-1.12.4.min.js" type="application/javascript"></script>
    <script>
        var check = false;
        $(function (){
            $("input[type='text']").keyup(function(){
                $.ajax({
                    "type":"post",
                    "url":"/master.do",
                    "data":{"opr":"checkuser","user":$("input[type='text").val()},
                    "dataType":"json",
                    "success":function(data){
                        if(data!=null){
                            $(".checkuser").text("");
                            check = true;
                        }else{
                            $(".checkuser").text("不存此账号！").css("color","red");
                            check = false;
                        }
                    }
                });
            })
        })
        function login() {
            var user = $("input[type='text']").val();
            var password = $("input[type='password']").val();
            if (user==""){
                alert("账号为空！不允许提交")
                user.focus();
                return false;
                }else if (password==""){
                alert("密码为空！不允许提交")
                password.focus();
                return false;
            }
            if (check==true){
                /*账号正确并且密码不为空开始验证账号密码*/
                $.ajax({
                    "type":"post",
                    "url":"/master.do",
                    "data":{"opr":"login","user":$("input[type='text").val(),"password":$("input[type='password").val()},
                    "dataType":"json",
                    "success":function(data){
                        if (data!=null){
                            alert("登录成功！")
                            window.location.href = "/user/index.jsp";
                        }else {
                            alert("密码不正确！请重新输入");
                            $("input[type='password").val("");
                            password.focus();
                        }
                    }
                });
            }
            return false;
        }
    </script>
</head>
<style>
    body{
        background-image: url("img/banner.jpg");
    }
    div{
        color: white;
        margin: 25% auto;
        width: 28%;
        font-size: 20px;
    }
    input{
        outline: none;
    }
    input[type='text'],input[type='password']{
        height: 27px;
        width: 226px;
    }
    input[type='submit'],input[type='reset']{
        padding: 10px 60px;
        outline: none;
        border: none;
        transition: 0.3s all;
        border-radius: 5px;
    }
    input[type='submit'],input[type='reset']{
        cursor: pointer;
    }
    input[type='submit']:hover,input[type='reset']:hover{
        background-color: darkseagreen;
        color: white;
    }

</style>
<body>
    <form method="post" action="#" onsubmit="return login();">
        <div>
            <h3 style="margin-left:100px">飓风之家</h3>
            <p>
                <span>账号:&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <input type="text"><span class="checkuser"></span>
            </p>
            <p style="width: auto">
                <span>密码:&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <input type="password"><span ></span>
            </p>
            <p><input type="submit" value="登录">&nbsp;&nbsp;&nbsp;<input type="reset" value="取消"></p>
        </div>
    </form>
</body>
</html>
